<template>
  <div class="box">
    <header class="header">
      <div class="top">
        <a @click="goBack" class="iconfont icon-zuojiantou1"></a>
        <a>设置</a>
      </div>
    </header>
    <div class="content">
      <ul>
        <router-link to="xinxi" tag="li">
          <img src="./../../assets/food.jpg">
          <b>LEI-LEI</b>
          <em>182****1517</em>
          <span class="iconfont icon-back-copy"></span>
        </router-link>
        <li>
          <a>消息推送</a>
          <span class="iconfont icon-back-copy"></span>
        </li>
        <li>
          <a>账号绑定</a>
          <span class="iconfont icon-back-copy"></span>
        </li>
        <li>
          <a>意见反馈</a>
          <span class="iconfont icon-back-copy"></span>
        </li>
        <li>
          <a>清理缓存</a>
          <span class="iconfont icon-back-copy"></span>
        </li>
        <li>
          <a>版本检测</a>
          <span class="iconfont icon-back-copy"></span>
        </li>
      </ul>
      <p @click="logout">退出登录</p>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "mint-ui";
Vue.use(Toast);

export default {
  data() {
    return {};
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    logout() {
      localStorage.setItem("isLogin", "no");
      this.$router.push("/login");
      Toast("退出成功");
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/lib/reset.scss";
.header {
  @include rect(100%, 0.44rem);
  @include background-color(#fff);
  @include text-color(#000);
  .top {
    @include rect(100%, 0.44rem);
    border-bottom: 1px solid #bbb;
    a:nth-of-type(1) {
      @include font-size(20px);
      @include text-color(#333);
      @include line-height(38px);
      @include margin(3px 0 0 15px);
      font-weight: 500;
      float: left;
    }
    a:nth-of-type(2) {
      @include font-size(18px);
      @include text-color(#000);
      // @include font-weight(600);
      @include line-height(44px);
      @include margin(0 25px);
      float: left;
    }
  }
}
.content {
  @include rect(100%, auto);
  @include background-color(rgba(241, 239, 239, 0.932));
  img {
    border: 1px solid #333;
    float: left;
    @include border-radius(50%);
    @include rect(0.4rem, 0.4rem);
    @include border-radius(50%);
    @include margin(9px 6px 0 20px);
  }
  ul {
    @include rect(100%, 4rem);
  }
  li {
    @include overflow();
    width: 100%;
    height: 50px;
    display: block;
    border-bottom: 1px solid #bbb;
    float: left;
    @include margin(0 0 1px 0);
    @include background-color(#fff);
    position: relative;
  }
  li:nth-of-type(1) {
    @include rect(100%, 60px);
    line-height: 40px;
    @include margin(8px 0 10px 0);
  }
  li:nth-of-type(1) b {
    display: block;
    width: 220px;
    height: 20px;
    font-size: 13px;
    color: #333;
    margin-left: 80px;
    font-weight: 100;
  }
  li:nth-of-type(1) em {
    width: 220px;
    height: 30px;
    font-size: 13px;
    color: #333;
    margin-left: 10px;
  }
  li:nth-of-type(1) span {
    position: absolute;
    top: 5px;
    right: 0;
  }
  li:nth-of-type(3) {
    @include margin(0 0 10px 0);
  }
  li a {
    @include font-size(16px);
    @include text-color(#000);
    @include line-height(50px);
    @include margin(0 20px);
    float: left;
  }
  li span {
    float: right;
    font-size: 20px;
    margin: 8px 20px 0 0;
    color: #000;
    font-weight: 700;
  }
  p {
    @include rect(90%, 0.4rem);
    @include background-color(#ffb31a);
    @include text-color(#fff);
    @include font-size(14px);
    text-align: center;
    @include line-height(40px);
    @include margin(auto);
    border-radius: 20px;
  }
}
</style>
